Este recurso permite colocar mais de uma imagem ou cartão na mesma linha. Fica muito bom quando desejamos apresentar uma equipe ou colaboradores de um projeto, por exemplo.
A classe .card-column cria uma grade de cartões semelhante a alvenaria. O layout será ajustado automaticamente à medida que você insere mais cartões.
Nota: Os cartões são exibidos verticalmente em telas pequenas (menos de 576px):
Algum texto dentro do primeiro cartão
Algum texto dentro do segundo cartão
Código:
<div class="card-columns">
<div class="card bg-primary">
<div class="card-body text-center">
<img class="card-img-top" src="img_avatar1.png" alt="Card image" style="width:100%">
<p class="card-text">Algum texto dentro do primeiro cartão</p>
</div>
</div>
<div class="card bg-warning">
<img class="card-img-bottom" src="img_avatar6.png" alt="Card image" style="width:100%">
<p class="card-text text-center">Algum texto dentro do segundo cartão</p>
</div>
</div>
Nota : Os cards serão colocados da esquerda para direita e não é permitido alinhar eles na página como, por exemplo, centralizar.